namespace("controls.FormPanel", 
{
	'@inherits' 		 : w3c.HtmlComponent,
	'@stylesheets' :  ["/" + appconfig.namespace + "/cdn/css/FormPanel.css"],	
	
	schema : {
	    "action" : "index.html",
	    "elements" :
	    [
	        {
	            "name" : "Username",
				"fieldset": "Personal Information",
				"tabindex": 1,
	            "type" : "text",
	            "placeholder" : "E.g. user@example.com",
				"regex":/\w/,
				"error": "Invalid entry",
				"confirm": true,
				"confirmerror": "Usernames do not match.",
				"required": true,
				"caption": "Enter a valid username to signup",
				"display":""
	        },
	        {
	            "name" : "Country",
				"tabindex": 2,
				"fieldset": "Personal Information",
	            "type" : "select",
				"placeholder" : "- Select Country -",
				"max": 1,
				"required": true,
				"bindings" : {
					"data" : "/HelloWorld/cdn/json/countries.json",
					"params": "component_id, title",
					"value": "Value",
					"display": "Display",
					"root": "result.data"
				}
	        },
			 {
	            "name" : "Models",
				"tabindex": 3,
				"fieldset": "Other Information",
	            "type" : "checkbox",
				"placeholder" : "",
				"max": 3,
				"min": 1,
				"required": true,
				"bindings" : {
					"data" : "/HelloWorld/cdn/json/models.json",
					"params": "component_id",
					"value": "Value",
					"display": "Display",
					"root": "result.data"
				}
	        }
	    ]
	},
	
	initialize : function(){
		this.addEventListener("keyup", this.onKeyUp.bind(this), false);
	},
	
	onKeyUp : function(e){
		console.log(e)
	},
	
	innerHTML :
	'<div>\
		<form onsubmit="return false;">\
			<div class="formitem">\
				<span class="label">Name:</span>\
				<input type="text"/>\
			</div>\
		</form>\
	</div>'
});